<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="出险信息" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                   labelWidth="auto">

          <uni-forms-item label="理赔类别:" name="settlementType" :required="boole">
            <text class="settlementType"/>
            <uni-data-checkbox v-if="boole" v-model="ruleForm.settlementType" :localdata="settlement"/>
            <text v-else> {{
                ruleForm.settlementType === '1' ? '实物赔付申请' : ruleForm.settlementType === '2' ? '理赔款支付申请' : '-'
              }}</text>
          </uni-forms-item>

          <uni-forms-item label="被保险人:" name="insuredName" :required="boole">
            <text class="insuredName"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.insuredName" placeholder="请输入被保险人"/>
            <text v-else> {{ ruleForm.insuredName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="驾驶员:" name="driverName" :required="boole">
            <text class="driverName"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.driverName" placeholder="请输入驾驶员"/>
            <text v-else> {{ ruleForm.driverName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="责任类型:" name="responsibilityType" :required="boole">
            <text class="responsibilityType"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.responsibilityType"
                                 :localdata="dict.type.responsibility_type"
                                 dataKey="label" dataValue="value"
                                 placeholder="请选择责任类型"
                                 :clear="true" filterable/>
            <text v-else> {{ handleLabel(dict.type.responsibility_type, ruleForm.responsibilityType) }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="责任方保险公司名称:" name="responsibleInsuranceUnitName" :required="boole">
            <text class="responsibleInsuranceUnitName"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.responsibleInsuranceUnitName"
                           placeholder="请输入责任方保险公司名称"/>
            <text v-else> {{ ruleForm.responsibleInsuranceUnitName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="事故类型:" name="accidentType" :required="boole">
            <text class="accidentType"/>
            <zxz-uni-data-select v-if="boole" v-model="ruleForm.accidentType" :localdata="dict.type.accident_type"
                                 dataKey="label" dataValue="value"
                                 placeholder="请选择事故类型"
                                 :clear="true" filterable/>
            <text v-else> {{ handleLabel(dict.type.accident_type, ruleForm.accidentType) }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="出险地点:" name="accidentLocation" :required="boole">
            <text class="accidentLocation"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.accidentLocation" placeholder="请输入出险地点"/>
            <text v-else> {{ ruleForm.accidentLocation || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="是否有人伤:" name="humanInjury" :required="boole">
            <text class="humanInjury"/>
            <uni-data-select v-if="boole" v-model="ruleForm.humanInjury" :localdata="range"
                             placeholder="请选择是否有人伤"
                             :clear="true" filterable/>
            <text v-else> {{
                ruleForm.humanInjury == '1' ? '是' : ruleForm.humanInjury == '2' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="报案时间:" name="reportingCaseTime" :required="boole">
            <text class="reportingCaseTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择报案时间"
                                 return-type="string" v-model="ruleForm.reportingCaseTime"/>
            <text v-else> {{ ruleForm.reportingCaseTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="报案号:" name="reportingCaseNum" :required="boole">
            <text class="reportingCaseNum"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.reportingCaseNum" placeholder="请输入报案号"/>
            <text v-else> {{ ruleForm.reportingCaseNum || '-' }}</text>
          </uni-forms-item>
        </uni-forms>

      </view>

    </view>

  </view>
</template>

<script>
export default {
  name: 'beDangerInfo',//出险信息
  dicts: ["accident_type", "responsibility_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Array,
      default: [],
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {},
  data() {
    return {
      settlement: [
          {value: "1", text: "实物赔付申请"},
          {value: "2", text: "理赔款支付申请"},
      ],
      range: [
        {value: "1", text: "是"},
        {value: "2", text: "否"},
      ],
      rules: {
        settlementType: {
          rules: [
            {
              required: true,
              errorMessage: "理赔类别",
              validateTrigger: "bind",
            },
          ],
        },
        insuredName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入被保险人",
              validateTrigger: "blur",
            },
          ],
        },
        driverName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入驾驶员",
              validateTrigger: "blur",
            },
          ],
        },
        responsibilityType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择责任类型',
              validateTrigger: "bind",
            }
          ]
        },
        responsibleInsuranceUnitName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入责任人单位名称",
              validateTrigger: "blur",
            },
          ]
        },
        accidentType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择事故类型',
              validateTrigger: "bind",
            }
          ]
        },
        accidentLocation: {
          rules: [
            {
              required: true,
              errorMessage: '请输入出险地点',
              validateTrigger: "blur",
            }
          ]
        },
        humanInjury: {
          rules: [
            {
              required: true,
              errorMessage: '请选择是否有人伤',
              validateTrigger: "bind",
            }
          ]
        },
        reportingCaseTime: {
          rules: [
            {
              required: true,
              errorMessage: '请选择报案时间',
              validateTrigger: "bind",
            }
          ]
        },
        reportingCaseNum: {
          rules: [
            {
              required: true,
              errorMessage: '请输入报案号',
              validateTrigger: "blur",
            }
          ]
        },
      }
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
            .validate()
            .then((res) => {
              resolve();
            })
            .catch((err) => {
              let key = ".flex-col" + ">>>" + "." + err[0].key;
              reject(key);
            });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


